<template>
  <div class="car">
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="carlist">
      <ul>
        <li v-for="(item, index) in goods" :key="index">
          <input
            type="checkbox"
            v-model="item.singCheck"
            @change="singChange(index)"
          />
          <img :src="item.pro_img" alt="" />
          <div class="cont">
            <p>{{ item.pro_title }}</p>
            <span>￥{{ item.pro_price }}</span>
          </div>
          <div class="btn">
            <span class="min" @click="cut(index)">-</span>
            <b class="num">{{ item.pro_num }}</b>
            <span class="add" @click="add(index)">+</span>
          </div>
          <div class="shanchu">
            <a href="" @click.prevent="shan(item.pro_id)">删除</a>
          </div>
        </li>
      </ul>
    </div>

    <van-submit-bar
      :price="all"
       button-text="提交订单"
       @submit="onSubmit(all)"
      style="margin-bottom: 48px"
    >
       <van-checkbox v-model="f"  @change="allChange">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { fapi } from "@/assets/js/farmapi.js";
export default {
  data() {
    return {
      active: 0,
      islogin: null,
      goods: [],
      all: 0,
      f: false,
      
    };
  },
  created() {
    this.car();
  },
  methods: {
    onClickLeft() {
      this.$router.push("/type");
    },
    onAddress() {
      this.$router.push("/address");
    },
    car() {
      fapi("api/listcar", { userId: sessionStorage.getItem("islogin") }).then(
        res => {
          // console.log(res);
          res.data.data.forEach((item) => {
            item.singCheck = false;
          });

          this.goods = res.data.data;
        }
      );
    },

    sum() {},

    allChange() {
      let sum = 0;

      if (this.f === true) {
        for (let i in this.goods) {
          this.goods[i].singCheck = true;
          sum += this.goods[i].pro_num * this.goods[i].pro_price;
          this.all = sum*100;
        }
      } else {
        for (let i in this.goods) {
          this.goods[i].singCheck = false;
          this.all = 0;
        }
      }
    },
    singChange(index) {
      let sum = 0;
      if (this.goods[index].singCheck == true) {
        this.goods[index].singCheck = true;
        console.log(this.goods);
        for (let x in this.goods) {
          if (this.goods[x].singCheck == true) {
            sum +=
              Number(this.goods[x].pro_num) * Number(this.goods[x].pro_price);
          }
          this.all = sum*100;
        }
      } else {
        this.goods[index].singCheck = false;
        for (let x in this.goods) {
          if (this.goods[x].singCheck == true) {
            sum +=
              Number(this.goods[x].pro_num) * Number(this.goods[x].pro_price);

            // console.log(sum);
          }
          this.all = sum*100;
        }
      }
      let allF = this.goods.every((item) => {
        return item.singCheck == true;
      });
      console.log(allF);
      if (allF == true) {
        this.f = true;
      } else {
        this.f = false;
      }
    },
    add(index) {
      // alert(9)
      let sum = 0;
      this.goods[index].pro_num = Number(this.goods[index].pro_num) + 1;
      // 如果当前的加数量的对象是选中的状态
      if (this.prolist[index].singCheck == true) {
        for (let x in this.goods) {
          if (this.goods[x].singCheck == true) {
            sum +=
              Number(this.goods[x].pro_num) * Number(this.goods[x].pro_price);

            // console.log(sum);
          }
          this.all = sum.toFixed(2)*100;
        }
      }
    },
    shan(pro_id) {
      let data = {
        pro_id: pro_id,
        userId: localStorage.getItem("islogin"),
      };
      fapi("api/deletecar", data).then((r) => {
        console.log(r);
        if (r.data.code == 200) {
          this.car();
        }
      });
    },
    

    cut(index) {
      let sum = 0;
      this.goods[index].pro_num = Number(this.goods[index].pro_num) - 1;

      if (this.goods[index].singCheck == true) {
        for (let x in this.prolist) {
          if (this.goods[x].singCheck == true) {
            sum +=
              Number(this.goods[x].pro_num) * Number(this.goods[x].pro_price);

            // console.log(sum);
          }

          this.all = sum*100;
        }
      }
    },
    onSubmit(a) {
        let arr = [];
        let sum =0
        for (let x in this.goods) {

          console.log(this.goods)
          if (this.goods[x].singCheck == true) {
              arr.push(this.goods[x]);
              sum+= Number(this.goods[x].pro_num) * Number(this.goods[x].pro_price)
          }
        }
       this.all = sum*100
        a =sum*100

      if (a == 0) {
        Toast("请先选择你要保养的产品");
      } else {
        this.$store.state.orderlist = arr
        this.$router.push('/order')
      }
    },
  },
};
</script>

<style scoped>
.carlist {
  width: 100%;
  padding: 10px;
}
.carlist ul li {
  width: 100%;
  height: 200px;
  padding: 10px;
  background-color: #fff;
  border-radius: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 20px;
}
.carlist ul li img {
  width: 100px;
  height: 100px;
}
.cont {
  width: 180px;
  margin-top: 10px;
}
.cont p {
  width: 180px;
  font-size: 34px;
  margin-bottom: 20px;
}
.cont span {
  font-size: 36px;
  color: #ff0000;
  font-weight: 600;
  text-align: center;
}
.btn {
  width: 200px;
  height: 100px;
  margin-top: 40px;
}
.min {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 30px;
  text-align: center;
  border-radius: 20px;
  border: 1px solid #cccccc;
  background-color: #fff;
  color: #ccc;
}
.num {
  margin: 0 20px;
  font-weight: 400;
  font-size: 30px;
}
.add {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 30px;
  text-align: center;
  border-radius: 20px;
  border: 1px solid #03a19c;
  background-color: #03a19c;
  color: #fff;
}
img {
  width: 100px;
  height: 100px;
}
.l {
  transform: translateX(-220px);
  font-size: 35px;
  width: 280px;
}
.shanchu {
  margin-right: 40px;
  margin-top: 30px;
}
</style>